<template>
  <div class="top_menu">
    <!-- 组织机构 -->
    <organization-view />

    <!-- 人员管理 -->
    <person-management />

    <!-- 作业区域道路设定 -->
    <work-area-list />

    <!-- 临时任务
    <div class="public" @click="temporaryTask">
      <span>临时任务</span>
    </div> -->

    <!-- 作业反馈 -->
    <!-- <div class="public" @click="homeworkFeedback">
      <span>作业反馈</span>
    </div> -->

    <!-- 考勤管理 -->
    <attendance-view />

    <!-- 视图 -->
    <div class="public" @mouseenter="viewListShow = true" @mouseleave="viewListShow = false">
      <span>视图</span>
      <div class="work_area_list view_list" v-if="viewListShow">
        <span>
          地图样式
          <!-- <i class="iconfont icon-you"></i> -->
        </span>
        <span>控制面板</span>
        <span>报警处理</span>
        <span>人员实时监控</span>
        <span>轨迹逐点播放</span>
        <span>轨迹快速显示</span>
        <!-- <span>主干道路(红色)</span>
        <span>次干道路(蓝色)</span>-->
        <span>一般道路</span>
        <span>工具栏</span>
        <span>状态栏</span>
      </div>
    </div>

    <!-- 临时任务 -->
    <!-- <div class="organization" v-if="temporaryTaskShow">
      <h2>
        <span class="iconfont icon-pcicon-"></span>
        <span>临时任务</span>
        <i class="iconfont icon-guanbi" @click="closeTemporaryTask"></i>
      </h2>
    </div> -->

    <!-- 作业反馈 -->
    <!-- <div class="organization" v-if="HFShow">
      <h2>
        <span class="iconfont icon-pcicon-"></span>
        <span>临时任务</span>
        <i class="iconfont icon-guanbi" @click="closeHomeworkFeedback"></i>
      </h2>
    </div> -->
  </div>
</template>

<script>
import eventBus from '@/eventBus.js'

// 作业区域道路设定
import WorkAreaList from '@/views/CleanerWork/TopToolbar/WorkAreaList.vue'
// 组织机构
import Organization from '@/views/CleanerWork/TopToolbar/Organization.vue'
// 人员管理
import PersonManagement from '@/views/CleanerWork/TopToolbar/PersonManagement.vue'
// 考勤管理
import Attendance from '@/views/CleanerWork/TopToolbar/Attendance.vue'

export default {
  components: {
    'work-area-list': WorkAreaList,
    'organization-view': Organization,
    'person-management': PersonManagement,
    'attendance-view': Attendance
  },
  data () {
    return {
      // temporaryTaskShow: false,
      HFShow: false,
      viewListShow: false
    }
  },
  created () {
    // eventBus.$on('closeCover', val => this.temporaryTaskShow = val)
    // eventBus.$on('closeCover', val => this.HFShow = val)
  },
  methods: {
    // // 临时任务
    // temporaryTask () {
    //   this.temporaryTaskShow = true
    //   eventBus.$emit('isCover', true)
    // },
    // // 关闭临时任务
    // closeTemporaryTask () {
    //   this.temporaryTaskShow = false
    //   eventBus.$emit('isCover', false)
    // },
    // // 作业反馈
    // homeworkFeedback () {
    //   this.HFShow = true
    //   eventBus.$emit('isCover', true)
    // },
    // // 关闭作业反馈
    // closeHomeworkFeedback () {
    //   this.HFShow = false
    //   eventBus.$emit('isCover', false)
    // }
  }
}
</script>

<style scoped lang="less">
.top_menu {
  height: 30px;
  color: #fff;
  background-color: #3baefa;
  display: flex;
  align-items: center;
  .public {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    position: relative;
    cursor: default;
    & > span:hover {
      color: #eee;
    }
  }
  .organization {
    width: 800px;
    height: 460px;
    padding: 0;
    padding-bottom: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    position: absolute;
    left: 50%;
    top: 130px;
    transform: translateX(-50%);
    z-index: 99;
    h2 {
      line-height: 30px;
      border-bottom: 1px solid #ccc;
      padding-left: 10px;
      color: #666;
      span {
        margin-right: 5px;
      }
      i {
        float: right;
        margin-right: 10px;
      }
    }
  }
  .work_area_list {
    width: 160px;
    // height: 78px;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
    position: absolute;
    top: 30px;
    z-index: 22;
    span {
      display: block;
      padding: 0 10px 0 20px;
      line-height: 26px;
      color: #333;
      &:hover {
        color: #fff;
        background-color: #2ea9fa;
      }
    }
  }
  .view_list {
    width: 138px;
  }
}
</style>
